<template>
  <div>
    <Chat v-if="chatBoxVisible" class="chatBox" />
    <div class="footer" @click="showChatBox">
      <span class="el-icon-message-solid" style="font-size: 25px; float: left; margin-left: 5px; margin-top: 5px"></span>
      <div style="margin-left: 30px; margin-top: 10px; float: left">
        消息通知
      </div>
    </div>
    <div style="width: 90%; margin-left: 5%">
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <el-date-picker
          v-model="formData.start"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'00:00:00'"
        />
        -
        <el-date-picker
          v-model="formData.end"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'23:59:59'"
        />
        <el-input v-model="formData.detail" placeholder="隐患内容" style="width: 150px; margin-left: 7px" />
        <el-input v-model="formData.uploader" placeholder="隐患发布者" style="width: 150px; margin-left: 7px" />
        <el-select v-model="formData.status" placeholder="隐患状态" style="width: 130px; margin-left: 7px">
          <el-option :key="1" label="已解决" value="已解决" />
          <el-option :key="2" label="未解决" value="未解决" />
        </el-select>
        <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleMutiDelete">
          删除内容
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="filterContent"
        element-loading-text="拼命加载中"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" min-width="5%" />
        <el-table-column align="center" label="隐患Id" min-width="10%">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="宣传内容" min-width="60%">
          <template slot-scope="scope">
            <div @click="showDetail(scope.row,scope.$index)">
              <contentText title="警情隐患" :text="scope.row.detail" :num="10" :author="scope.row.uploader" :time="scope.row.time" :top="false" :section="scope.row.status" />
            </div>
            <!--            <div v-if="scope.row.top" style="float: left; width: 5%">-->
            <!--              <img width="35px" src="@/assets/icon/top.png">-->
            <!--            </div>-->
          </template>
        </el-table-column>
        <el-table-column label="操作隐患" align="center" min-width="25%">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === '未解决'" type="primary" size="mini" @click="handleUpdate(scope.row,scope.$index)">
              解决
            </el-button>
            <el-tag v-if="scope.row.status === '已解决'" type="success" style="margin-right: 10px">
              已解决
            </el-tag>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="隐患详情" :visible.sync="dialogContentVisible" width="70%">
      <!--      <div class="context-title">-->
      <!--        {{ chooseContent.title }}-->
      <!--      </div>-->
      <div class="box"><span class="time">发布时间：{{ chooseContent.time }}</span><br></div>
      <div class="context-container">
        <div class="context">
          <p style="text-align: center">{{ chooseContent.status }}</p>
          <br>
          <p style="text-align: justify" v-html="chooseContent.detail" />
          <br>
        </div>
        <div class="bj">隐患发布者：{{ chooseContent.uploader }}</div>
        <br style="clear: both">
      </div>
    </el-dialog>
    <!--    region-->
    <!--    <div class="app-container">-->
    <!--      <div class="filter-container">-->
    <!--        <el-date-picker-->
    <!--          v-model="formData.start"-->
    <!--          type="datetime"-->
    <!--          placeholder="选择日期"-->
    <!--          value-format="yyyy-MM-dd HH:mm:ss"-->
    <!--          :default-time="'00:00:00'"-->
    <!--        />-->
    <!--        - -->
    <!--        <el-date-picker-->
    <!--          v-model="formData.end"-->
    <!--          type="datetime"-->
    <!--          placeholder="选择日期"-->
    <!--          value-format="yyyy-MM-dd HH:mm:ss"-->
    <!--          :default-time="'23:59:59'"-->
    <!--        />-->
    <!--        <el-input v-model="formData.detail" placeholder="隐患内容" style="width: 200px;" class="filter-item" />-->
    <!--        <el-input v-model="formData.uploader" placeholder="隐患发布者" style="width: 200px;" class="filter-item" />-->
    <!--        <el-select v-model="formData.status" placeholder="隐患状态" clearable class="filter-item" style="width: 130px">-->
    <!--          <el-option :key="1" label="已解决" value="已解决" />-->
    <!--          <el-option :key="2" label="未解决" value="未解决" />-->
    <!--        </el-select>-->
    <!--        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">-->
    <!--          搜索-->
    <!--        </el-button>-->
    <!--        <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">-->
    <!--          Export-->
    <!--        </el-button>-->
    <!--        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
    <!--          reviewer-->
    <!--        </el-checkbox>-->
    <!--      </div>-->

    <!--      <el-table-->
    <!--        :key="tableKey"-->
    <!--        :data="dangerList"-->
    <!--        border-->
    <!--        fit-->
    <!--        highlight-current-row-->
    <!--        style="width: 100%;"-->
    <!--        @sort-change="sortChange"-->
    <!--      >-->
    <!--        <el-table-column label="隐患ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">-->
    <!--          <template slot-scope="{row}">-->
    <!--            <span>{{ row.id }}</span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="上传时间" width="150px" align="center">-->
    <!--          <template slot-scope="{row}">-->
    <!--            <span>{{ row.time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="上传者" width="110px" align="center">-->
    <!--          <template slot-scope="{row}">-->
    <!--            <span>{{ row.uploader }}</span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="Readings" align="center" width="95">-->
    <!--          <template slot-scope="{row}">-->
    <!--            <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>-->
    <!--            <span v-else>0</span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="Status" class-name="status-col" width="100">-->
    <!--          <template slot-scope="{row}">-->
    <!--            <el-tag :type="row.status | statusFilter">-->
    <!--              {{ row.status }}-->
    <!--            </el-tag>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">-->
    <!--          <template slot-scope="{row,$index}">-->
    <!--            <el-button type="primary" size="mini" @click="handleUpdate(row)">-->
    <!--              Edit-->
    <!--            </el-button>-->
    <!--            <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">-->
    <!--              Publish-->
    <!--            </el-button>-->
    <!--            <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">-->
    <!--              Draft-->
    <!--            </el-button>-->
    <!--            <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">-->
    <!--              Delete-->
    <!--            </el-button>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->

    <!--      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

    <!--      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
    <!--        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">-->
    <!--          <el-form-item label="Type" prop="type">-->
    <!--            <el-select v-model="temp.type" class="filter-item" placeholder="Please select">-->
    <!--              <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="Date" prop="timestamp">-->
    <!--            <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="Title" prop="title">-->
    <!--            <el-input v-model="temp.title" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="Status">-->
    <!--            <el-select v-model="temp.status" class="filter-item" placeholder="Please select">-->
    <!--              <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="Imp">-->
    <!--            <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="Remark">-->
    <!--            <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--        <div slot="footer" class="dialog-footer">-->
    <!--          <el-button @click="dialogFormVisible = false">-->
    <!--            Cancel-->
    <!--          </el-button>-->
    <!--          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
    <!--            Confirm-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--      </el-dialog>-->

    <!--      <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">-->
    <!--        <el-table :data="pvData" border fit highlight-current-row style="width: 100%">-->
    <!--          <el-table-column prop="key" label="Channel" />-->
    <!--          <el-table-column prop="pv" label="Pv" />-->
    <!--        </el-table>-->
    <!--        <span slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>-->
    <!--      </span>-->
    <!--      </el-dialog>-->
    <!--    </div>-->
    <!--    endregion-->
  </div>
</template>

<script>
import Chat from './chat'
import contentText from '../../components/notice/contentText'

export default {
  name: 'PoliceDanger',
  components: {
    Chat,
    contentText
  },
  data() {
    return {
      chatBoxVisible: false,
      formData: {
        detail: '',
        uploader: '',
        start: '',
        end: '',
        status: ''
      },
      contentList: [
        {
          id: 1,
          detail: '井盖缺失',
          uploader: 'aa',
          time: '1天前',
          status: '未解决',
          position: ''
        },
        {
          id: 2,
          detail: '玻璃破损',
          uploader: 'bb',
          time: '1天前',
          status: '未解决'
        },
        {
          id: 3,
          detail: '电线杆损坏',
          uploader: 'aa',
          time: '1天前',
          status: '已解决'
        },
        {
          id: 4,
          detail: '积雪过多',
          uploader: 'aa',
          time: '1天前',
          status: '未解决'
        }
      ],
      chooseSection: '最新公告',
      multipleSelection: [],
      dialogContentVisible: false,
      dialogFormVisible: false,
      dialogSectionVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑公告',
        create: '发布公告'
      },
      listLoading: false,
      draftContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true
      },
      chooseContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true
      },
      chooseIndex: -1,
      filterContent: []
    }
  },
  created() {
    this.filterContent = this.contentList
  },
  methods: {
    showChatBox() {
      this.chatBoxVisible = !this.chatBoxVisible
    },
    saveDraft() {
      this.draftContent = Object.assign({}, this.chooseContent) // copy obj
    },
    loadDraft() {
      this.chooseContent = Object.assign({}, this.draftContent) // copy obj
    },
    postTop(row) {
      row.top = true
    },
    cancelTop(row) {
      row.top = false
    },
    addSection() {
      this.productList.pc.list.push({
        src: require('@/assets/icon/newOther.png'),
        name: this.newSection
      })
      this.dialogSectionVisible = false
      this.$notify({
        title: 'Success',
        message: '增加成功',
        type: 'success',
        duration: 2000
      })
    },
    changeSection(sec) {
      if (sec === '最新公告') {
        this.filterContent = this.contentList
        this.chooseSection = sec
        return
      }
      this.chooseSection = sec
      this.filterContent = this.contentList.filter(item => {
        return item.section === sec
      })
    },
    showDetail(row, index) {
      this.chooseContent = Object.assign({}, row) // copy obj
      this.chooseIndex = index
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogContentVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      console.log(this.contentList[index])
      this.contentList.splice(index, 1)
    },
    handleUpdate(row, index) {
      // this.chooseContent = Object.assign({}, row) // copy obj
      // console.log(this.chooseContent)
      // this.chooseIndex = index
      // this.dialogStatus = 'update'
      // this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
      row.status = '已解决'
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    updateData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.splice(this.chooseIndex, 1, this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Update Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     const tempData = Object.assign({}, this.temp)
      //     tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
      //     updateArticle(tempData).then(() => {
      //       const index = this.list.findIndex(v => v.id === this.temp.id)
      //       this.list.splice(index, 1, this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Update Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    createData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.unshift(this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Created Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
      //     this.temp.author = 'vue-element-admin'
      //     createArticle(this.temp).then(() => {
      //       this.list.unshift(this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Created Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleMutiDelete() {
      if (this.multipleSelection.length) {
        this.multipleSelection.forEach(element => {
          const index = this.contentList.findIndex(item => item === element)
          this.contentList.splice(index, 1)
        })
        this.$notify({
          title: 'Success',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$message({
          message: '请选择至少一个选项',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
  .footer{
    height: 40px;
    width: 200px;
    background-color: #ddd;
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 999;
  }
  .chatBox{
    height: 50%;
    width: 40%;
    position: fixed;
    bottom: 40px;
    right: 10px;
    z-index: 999;
  }
  .active {
    font-weight: bold;
  }
  .index-wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .index-left {
    float: left;
    width: 240px;
    text-align: left;
  }
  .index-right {
    float: left;
    width: 78%;
    margin-bottom: 10px;
  }
  .index-left-block {
    margin: 15px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
  }
  .index-left-block .hr {
    margin-bottom: 20px;
  }
  .index-left-block h2 {
    background: #6d9eeb;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: bold;
  }
  .index-left-block h3 {
    font-size: 14px;
    padding: 0 15px 5px 15px;
    color: #212121;
  }
  .index-left-block ul {
    padding: 0 15px;
    text-shadow: 0 0 black;
    background-color: white;
    line-height: 30px;
    color: #757575;
    padding-left: 30p;
    font-size: 14px;
    list-style-type: none;
  }
  .h3-line{
    color: #d4d4d4;
  }
  .index-left-block li {
    padding: 7px;
    border-radius: 10px;
  }
  .index-left-block li:hover {
    background-color: #d8ecff;
  }
  .left-img{
    display:inline-block;
    vertical-align: middle;
  }
  .left-a{
    display: inline-block;
    margin-left: 10px;
  }
  .index-board-list {
    overflow: hidden;
  }
  .index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .index-board-item-inner {
    min-height: 200px;
    padding-left: 180px;
    position: relative;
  }
  /*.index-board-car .index-board-item-inner{*/
  /*  background: url(~@/assets/images/1.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-loud .index-board-item-inner{*/
  /*  background: url(~@/assets/images/2.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-earth .index-board-item-inner{*/
  /*  background: url(~@/assets/images/3.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-hill .index-board-item-inner{*/
  /*  background: url(~@/assets/images/4.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  .index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
  }
  .index-board-item p{
    font-size: 12px;
    width: 200px;
    line-height: 20px;
  }

  .line-last {
    margin-right: 0;
  }
  .index-board-button {
    position: absolute;
    bottom: 0px;
  }
  .lastest-news {
    min-height: 512px;
  }
  .hot-tag {
    background: red;
    color: #fff;
  }
  .new-item {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right-content{
    width:100%;
    float: left;
    margin-top: 20px;
  }
  .right-title{
    display: inline-block;
    width:100%;
    margin-top: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  /deep/ .elbut {
    width: 160px;
    background: #6d9eeb;
  }
  .context-title {
    font-size: 24px;
    color: #444444;
    text-align: center;
    font-weight: bold;
    line-height: 38px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  .time {
    color: #999;
    font-size: 14px;
    float: left;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
  }
  .context {
    color: #444444;
    font-size: 16px;
    line-height: 32px;
  }
  .context p {
    text-indent: 2em;
    display: block;
    /* margin-block-start: 1em; */
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0 0;
    padding: 0 0;
  }
  .bj {
    float: right;
    margin-top: 75px;
    color: #777777;
  }
  .context-container {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 0 0 20px;
  }
</style>
